<!-- 我的红包 -->
<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-title flex justify-center align-center" :style="{'paddingTop': tabbarTop}">
				<view class="icon" @click="back">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/linkbank.png" mode=""></image>
				</view>
				<view class="title flex justify-center align-center">
					我的钱包
				</view>
			</view>
		</view>
		<!-- 卡片区域 -->
		<view class="content">
			<view class="card flex justify-between flex-column">
				<view class="title">
					总资产(CNY)
				</view>
				<view class="money flex justify-between align-center">
					<view class="count">
						{{item.total}}
					</view>
					<view class="withdrawal flex justify-center align-center" @click="link">
						<view class="text">
							去提现
						</view>
						<u-icon name="arrow-right" color="#FFFFFF" size="28"></u-icon>
					</view>
				</view>
				<view class="earnings flex justify-between">
					<view class="yesterday">
						昨日收益：¥{{item.yesterdayIncome}}
					</view>
					<view class="cumulative">
						累计收益：¥{{item.income}}
					</view>
				</view>
			</view>
			<view class="line">
				
			</view>
			<view class="list">
				<view class="listtitle">
					资产明细
				</view>
				<view class="biao">
					<scroll-view scroll-y="true" class="scroll" :style="{'height': `calc(100vh - 559rpx - ${titleHeight}px - env(safe-area-inset-bottom))`}">
						<view class="item flex justify-between flex-column" v-for="it in item.records " :key="it.withdrawLogId">
							<view class="top flex justify-between">
								<view class="left">
									{{it.withdrawName}}
								</view>
								<view class="right" v-if="withdrawType">
									+{{it.withdrawAmount}}
								</view>
								<view class="right1" v-if="withdrawType">
									-{{it.withdrawAmount}}
								</view>
							</view>
							<view class="bot flex justify-between">
								<view class="left">
									{{it.withdrawTitle}}
								</view>
								<view class="right">
									{{getTimer(it.createDate)}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarTop: 0,
				titleHeight: 0,
				item:{}
			}
		},
		onLoad() {
			this.init()
			this.getData()
		},
		methods: {
			//初始化
			init() {
				this._setTabbarTitleHeight()
				this._getTitleHeight()
			},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top + 'px'
			},
			//获取列表头部文字高度
			_getTitleHeight(){
				uni.createSelectorQuery().select('.listtitle').boundingClientRect(item=>{
					this.titleHeight = item.height
				}).exec()
			},
			//去提现
			link(){
				uni.navigateTo({
					url: '/pagesA/withdrawal/withdrawal'
				})
			},
			//请求分页
			async getData() {
				let {data :item} = await this.$get('/userWithdrawLog/page')
				console.log(item)
				this.item = item
			},
			//返回按钮
			back(){
				uni.navigateBack({
					delta: 0
				})
			},
			getTimer(timer) {
			  
			  let nowe = new Date();  // 当前的系统时间
			  let oldtime = new Date(timer);   //目标时间
			  let t_day = oldtime.getDate();
			  let t_year = oldtime.getFullYear();
			  let t_month = oldtime.getMonth() + 1;
			  let t_hour = oldtime.getHours();
			  let t_minute = oldtime.getMinutes();
			  if (t_hour<10){
			    t_hour = '0' + t_hour
			  }
			  if (t_minute < 10) {
			    t_minute = '0' + t_minute
			  }
			  let n_year = nowe.getFullYear();
			  let n_month = nowe.getMonth() + 1;
			  let n_day = nowe.getDate();
			  let mistiming = nowe - oldtime; // 计算出当前时间，与目标时间的时间差
			  if (t_year == n_year) {
			    if (n_month == t_month) {
			      //  在同一月  
			      if (n_day - t_day == 1) {
			        // 差等于1 昨天 + 时分
					console.log('昨天' + ' ' + t_hour + ':' + t_minute)
			        return '昨天' + ' ' + t_hour + ':' + t_minute
			      } else if (n_day - t_day == 0) {
			        // 显示 时分
					console.log( t_hour + ':' + t_minute)
			        return t_hour + ':' + t_minute
			      } else {
					console.log(t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute)
			        return t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute
			      }
			    }else {
					console.log(t_month + '.' + t_day)
					return t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute
				}
			  } else {
			    //跨年了  显示 年 月 日 
				console.log(t_year + '.' + t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute)
			    return t_year + '.' + t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute
			  }
			},
		}
	}
</script>

<style lang="scss">
.page{
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: env(safe-area-inset-bottom);
	.tabbar{
		width: 750rpx;
		height: 273rpx;
		background: linear-gradient(135deg, #1C79F8, #0265EB);
		.tabbar-title {
			
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
			.title{
				width: 100%;
				padding-right: 70rpx;
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
		}
	}
	.content{
		position: relative;
		.line{
			height: 206rpx;
		}
		.card{
			width: 690rpx;
			height: 276rpx;
			background-image: url("https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/card.png");
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
			top: -70rpx;
			left: 30rpx;
			padding: 30rpx;
			.title{
				font-weight: 500;
				color: #FFFFFF;
				font-size: 28rpx;
			}
			.money{
				.count{
					font-weight: bold;
					color: #FFFFFF;
					font-size: 72rpx;
				}
				.withdrawal{
					.text{
						font-weight: 500;
						color: #FFFFFF;
						font-size: 28rpx;
					}
				}
			}
			.earnings{
				font-weight: 500;
				color: #FFFFFF;
				font-size: 24rpx;
			}
		}
		.list{
			padding: 0 30rpx;
			.listtitle{
				font-weight: bold;
				color: #333333;
				font-size: 36rpx;
				margin: 40rpx 0;
			}
			.biao{
				.scroll{
					border-radius: 24rpx;
					overflow: hidden;
					.item{
						width: 690rpx;
						height: 130rpx;
						background: #FFFFFF;
						border-radius: 24rpx;
						padding: 30rpx;
						margin-bottom: 30rpx;
						.top{
							.left{
								font-weight: bold;
								color: #333333;
								font-size: 28rpx;
							}
							.right{
								font-weight: bold;
								color: #0265EB;
								font-size: 28rpx;
							}
							.right1{
								font-weight: bold;
								color: #d81045;
								font-size: 28rpx;
							}
						}
						.bot{
							.left{
								font-weight: 400;
								color: #666666;
								font-size: 24rpx;
							}
							.right{
								font-weight: 400;
								color: #999999;
								font-size: 22rpx;
							}
						}
					}
					.item:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
}
</style>
